import React, { Component } from "react";
import { allMvs } from "../../api/mvs";

export default class Mvs extends Component {
  constructor() {
    super();
    this.state = {
      // 区域列表
      areas: ["全部", "内地", "港台", "欧美", "日本", "韩国"],
      // 选中区域索引
      areaIndex: 0,
      // 区域列表
      types: ["全部", "官方版", "原声", "现场版", "网易出品"],
      // 选中区域索引
      typeIndex: 0,
      orders: ["上升最快", "最热", 最新],
      orderIndex: 0,
      // 限制条数
      limit: 12,
      // 页码
      page: 1,
      // 总条数
      total: 0,
      // mv列表
      mvList: [],
    };
  }
  async loaderAllMvs() {
    const { areas, areaIndex, types, typeIndex, orderIndex, orders } =
      this.state;
    const res = await allMvs({
      area: areas[areaIndex],
      type: types[typeIndex],
      order: orders[orderIndex],
      offset: (page - 1) * 12,
      limit: 12,
    });
    if (res.data.code === 200) {
      console.log(res);
      this.setState({
        mvList: res.data.data,
        total: res.data.count || total,
      });
    }
  }
  renderCondition = () => {
    const { areas, areaIndex, types, typeIndex, orders, orderIndex } =
      this.state;
    return (
      <div className="filter-wrap">
        <div className="section-wrap">
          <span className="section-type">地区</span>
          <ul className="tabs-wrap">
            {
              (areas.map = (v, i) => {
                return (
                  <li className="tab" key={v}>
                    <span
                      className={i === areaIndex ? "title active" : "title"}
                      onClick={() => this.changeArea(i)}
                    >
                      {v}
                    </span>
                  </li>
                );
              })
            }
          </ul>
        </div>
      </div>
    );
  };

  renderContent = () => {};
  changeArea = (i) => {
    this.setState({
      areaIndex: i,
    });
  };
  render() {
    return (
      <div>
        {this.renderCondition()}
        {/* 内容 */}
        {this.renderContent()}
      </div>
    );
  }
}
